<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<!-- 
		1.Vue中常用的按键别名:一些别名可以用于事件修饰符
			回车 => enter
			删除 => delete(捕获“删除”和“退格”键)
			退出 =>esc
			空格 => space
			//tab键本身有切换元素焦点的功能，使用keyup时，会导致焦点切换到其他元素上
			//导致无法触发事件。
			换行 => tab (特殊，必须配合keydown去使用)
			上 =>up
			下=>down
			左 =>left
			右 => right
		2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
			比如切换大小写的按键是的原始值是CapsLock，绑定时需要转换为caps-lock，即：@keydown.caps-lock
		3.系统修饰键(用法特殊):ctrl、alt、shift、meta(就是window中的win键，mac中的command键)
			(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
			    如果想只能按下y键，释放y键，事件才能被触发，按下其他按键不会触发。
				这样写即可：@keydown.ctrl.y="showInfo"
			(2).配合keydown使用:正常触发事件。
		4.也可以使用keyCode去指定具体的按键(不推荐)
		5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
		   如：Vue.config.keyCodes.huiche = 13 
	 -->
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<h1>你好，{{name}}</h1>
			<!-- 键盘一般有2个事件 keyDown,keyUp -->
			<input type="text" placeholder="按下回车提示输入" @keydown.caps-lock="showInfo" />
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo" />
			<input type="text" placeholder="按下回车提示输入" @keyup.up="showInfo"/>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定制按键别名
		new Vue({
			el: '#root',
			data: {
				name: '尚硅谷'
			},
			methods: {
				showInfo(e) {
					//if (e.keyCode != 13) return;//在vue中使用enter修饰符效果一样。
					//console.log(e.keyCode)//e.keyCode获取按键的编码
					//e.key //获取按键值
					console.log(e.key, e.keyCode);
					console.log(e.target.value) // 获取标签的值，也就是用户输入的内容。
				}
			}
		})
	</script>
</html>